import React, {Component} from 'react';
import GridTable from '../../components/display/gridTable';
import { Button, Input, Select, Row, Col, Tooltip ,Divider} from 'antd';
import { buildingApply,
  processed
} from '../../fetch/fetchApi';
const Option = Select.Option;

class ApplyBuildPile extends Component {
  constructor () {
    super();
    this.state = {
      gridData: null,
      loadingmes: '查询',
      loading: !1,
      btnloading: !1,
      pagination: {
        total: 0
      }
    };
    this.init();
    this.buildType = {
      '0': '合作建站',
      '1': '我要建站',
      '2': '私人建站',
      '3': '其他'
    }
  }

  componentDidMount () {
    this.queryChargeInfo();
  }

  init () {
    this.query = {
      page: '1',
      pagecount: '10'
    };
    this.params = {};
    // 设置表头
    this.tableColumns = [
      {
        title: '联系电话',
        dataIndex: 'contactPhone',
        key: 'contactPhone',
        fixed: 'left',
        width: 100,
      }, {
        title: '联系人',
        dataIndex: 'contactName',
        key: 'contactName',
      }, {
        title: '申请用户',
        dataIndex: 'userId',
        key: 'userId',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text} >
            {text}
          </Tooltip>)
      }, {
        title: '建桩类型',
        dataIndex: 'stationType',
        key: 'stationType',
        render: (text, record) => (
          <div>{this.buildType[text]}</div>
        )
      }, {
        title: '建桩位置',
        dataIndex: 'buildAddress',
        key: 'buildAddress',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text} >
            {text}
          </Tooltip>)
      }, {
        title: '备注信息',
        dataIndex: 'remark',
        key: 'remark',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text} >
            {text}
          </Tooltip>)
      }, {
        title: '上报时间',
        dataIndex: 'createTime',
        key: 'createTime',
        className: 'column-nowrap'
      }, {
        title: '状态',
        dataIndex: 'statusInfo',
        key: 'statusInfo'
      }
      , {
        title: '操作',
        key: 'action',
        fixed: 'right',
        width: 100,
        render: (text, record) => (
          <div className="action-wrap">
            {record.status === 3 &&
            < a id={record.key} href="javascript:void(0);" onClick={(e) => this.confirmDone(e, '1')}>通过</a>
            }
            {record.status === 3 && <Divider type="vertical" />}
            {record.status === 3 && <a id={record.key} href="javascript:void(0);" onClick={(e) => this.confirmDone(e, '2')}>不通过</a>}
            {record.status === 3 && <Divider type="vertical" />}
            <a id={record.key} href="javascript:void(0);" onClick={(e) => this.confirmDone(e, '0')}>删除</a>
          </div>
        )
      }
    ];
    // 设置checkbox选择参数
    this.rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.params['ids'] = selectedRowKeys;
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    };
  }

  // dispatch apply
  confirmDone (e, status) {
    this.params['ids'] = e.target.id;
    this.params['status'] = status;
    this.processed();
  }

  // fetch 申请建桩信息
  async buildingApply () {
    this.setState({
      loading: !0,
      btnloading: !0
    });
    try {
      const resData = await buildingApply(this.query);
      if (resData.data.code === '200') {
        const pagination = {
          total: resData.data.pageLimit.totalCount,
          onShowSizeChange: (current) => {
            this.turnPage(current)
          },
          onChange:(current) => {
            this.turnPage(current)
          }
        }
        this.setState({
          pagination
        });
        return resData.data.data;
      }
    } catch (e) {
      console.log(e);
    }
  }

  buildingApplyCb () {
    this.buildingApply().then((data) => {
      this.setState({
        loading: !1,
        btnloading: !1,
        gridData: data
      });
    });
  }

  // 跳转页码
  turnPage (current) {
    this.query['page'] = current.toString();
    this.buildingApplyCb();
  }

  // 处理充电数申请
  async processed () {
    try {
      const resData = await processed(this.params);
      resData.data.code === '200' && this.queryChargeInfo();
    } catch (e) {
      console.log(e);
    }
  }

  // 提交查询
  queryChargeInfo () {
    this.query.page = '1';
    this.state.pagination.current = 1;
    this.setState({
      pagination: this.state.pagination
    });
    this.buildingApplyCb();
  }



  // 注入账号信息参数
  userInputHandler (e) {
    this.query['contactPhone'] = e.target.value.toString();
  }

  // 注入状态参数
  stateInputHandler (e) {
    this.query['powerStationType'] = parseInt(e);
  }

  // 注入类型参数
  typeInputHandler (e) {
    this.query['status'] = parseInt(e);
  }

  render () {
    const Content = <div className="sc-page-content">
      <div className="page-toolbar">
        <Row gutter={8}>
          <Col lg={8} xl={4}>
            <Input placeholder="用户账号精确查询" onChange={this.userInputHandler.bind(this)}/>
          </Col>
          <Col lg={8} xl={4}>
            <Select placeholder="建桩类型" onChange={this.stateInputHandler.bind(this)}>
              <Option value="0">合作建站</Option>
              <Option value="1">我要建站</Option>
              <Option value="2">私人建站</Option>
              <Option value="3">其他</Option>
            </Select>
          </Col>
          <Col lg={8} xl={4}>
            <Select placeholder="状态" onChange={this.typeInputHandler.bind(this)}>
              <Option value="1">审核通过</Option>
              <Option value="2">审核不通过</Option>
              <Option value="3">未审核</Option>
            </Select>
          </Col>
          <div  className="button-inlineBlock">
            <Button type="primary" onClick={this.queryChargeInfo.bind(this)} loading={this.state.btnloading}>{this.state.loadingmes}</Button>
          </div>
        </Row>
      </div>
      <div className="page-panel">
        <GridTable postyle="table-center" rowSelection={this.rowSelection} data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
      </div>
    </div>;

    return Content;
  }
}

export default ApplyBuildPile;